<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="../css/a.css"> -->
</head>

<body>
  <button class="btn">change</button>
  <a href="https://www.baidu.com" target="_self">
    <img src="../images/bg_5.jpeg" alt="图片加载失败">
  </a>
  <input type="image" src="" alt="">
</body>
<script>
    // 非表单元素取值和赋值 
    // innerHTML
    // innerText
    // textContent
    // outerHTML
    // outerText

    // value    

    // 通用:
    // tagName  => 返回元素的标签名
    // id         获取和设置元素的id名
    // className  获取和设置元素的class名
    // classList  返回class形成的集合 (多class名)
    // title      获取和设置元素的title

    // style      获取和设置元素的内联样式
    // 设置时没问题  内联样式权重 1000 
    // 获取时有问题  只能获取内联样式 => 无法获取内部 外部 默认样式

    // getComputedStyle(ele)    => 传入一个dom元素 返回css形成的对象  {width,height,}
    // ele.currentStyle

</script>
<script>
  // 需求 点击按钮 切换a:href  img:src

  var a = document.getElementsByTagName("a")[0];
  var img = document.getElementsByTagName("img")[0];
  var btn = document.getElementsByClassName("btn")[0];


  // 元素节点的属性
  // href    获取和设置元素的href  (a link)
  // target    获取和设置元素的target

  // src     获取和设置元素的src   (img,script,input:image)
  // alt     获取和设置元素的alt


  // console.dir(a);
  console.dir(img);

  btn.onclick = function () {
    // 1.  通过getAttribute() setAttribute()  获取修改标签内的属性
    // a.setAttribute("href","https://www.jd.com");
    // a.setAttribute("target","_blank");
    // img.setAttribute("src","../images/bg_6.jpeg");

    // 2. 元素节点的属性 
    // console.log(a.href);
    // console.log(a.target);
    // console.log(img.src);
    // console.log(img.alt);
    a.href = "https://www.taobao.com";
    a.target = "_blank";
    img.src = "../images/bg_7.jpeg";

  }


</script>

</html>